<template>
  <div class="my-sub">
    <h3>Sub组件</h3>
    <p>当前库存: {{ count }}</p>
    <p>{{ uname }}</p>
    <button @click="subNum(5)">减少库存</button>
  </div>
</template>

<script>
// 按需导入辅助函数
import {
  mapState,
  mapMutations
} from 'vuex'
// state：映射到 computed 中
// mutations: 映射到 methods 中
export default {
  computed: {
    // 把辅助函数的返回值展开到计算属性中
    // 数组：不改名，映射到组件的名字与state下的名字一致
    // ...mapState(['num', 'username']),
    // 对象：支持改名，可以自定义映射到组件的计算属性的名字，
    //      对象的key的是留在当前组件的名字，value对应state的名字
    // 注意：其它的辅助函数都支持数组和对象的传参，作用类似
    ...mapState({
      count: 'num',
      uname: 'username'
    })
  },
  methods: {
    ...mapMutations(['subNum'])
  }
}
</script>

<style>

</style>
